<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .ball {
      margin: 60px auto;
      width: 80px;
      height: 80px;
      border-radius: 80px;
      background-color: #ccc;
    }

    @keyframes fadeInBall {
      0% {
        background-color: #ccc;
      }

      20% {
        background-color: green;
      }

      60% {
        background-color: yellow;
      }

      100% {
        background-color: red;
      }
    }

    .ball {
      animation-name: fadeInBall;
      animation-duration: 5s;
      animation-timing-function: ease-out;
      animation-iteration-count: infinite;
    }

    ul{
      list-style: none;
      width: 400px;
    }
    
    ul li{
      padding: 5px;
      border: 1px solid rosybrown;
      margin-bottom: 2px;
    }

    @keyframes climb {
      0% {
        /* border: 1px solid red; */
        background-color: aliceblue;
      }

      25% {
        transform: translateY(-30px);
        background-color: greenyellow;
      }

      50%{
        transform: translateY(-40px);
        /* border: 1px solid rosybrown; */
      }

      100%{
        transform: translateY(-50px);
      }
    }

    .ranking-start{
      animation: climb;
      animation-duration: 5s;
      animation-timing-function: ease-out;
    }

    .move-man{
      height: 50px;
      width: 200px;
      border: 1px solid #ccc;
      vertical-align: middle;
      text-align: center;
    }
  </style>
  <!-- <script src="https://cdn.bootcss.com/odometer.js/0.4.8/odometer.js"></script> -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">

  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
  <div class="ball">
  </div>

  <table>
    <tr id="target1">
      <td>今天迟到人数</td>
      <td>1</td>
    </tr>
    <tr id="target2">
      <td>今天缺勤人数</td>
      <td>1</td>
    </tr>
  </table>
  <button id="play">触发</button>

  <ul>
    <li class="am-end">周麻婆豆腐</li>
    <li>青葱豆腐</li>
    <li class="am-start">香煎豆腐</li>
  </ul>
  <div class="move-man">测试排名</div>
  <button id="rankingBtn">改变排名</button>

</body>
<script>
  $(function () {

    $('#play').click(function () {
      $("#target1").removeClass().addClass('animated heartBeat delay-2s').one(
        'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
        function () {
          $(this).removeClass();
        });
      $("#target2").removeClass().addClass('animated heartBeat delay-2s').one(
        'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
        function () {
          $(this).removeClass();
        });
    });

    $('#rankingBtn').click(function(){
      $('.move-man').addClass('ranking-start');
    })
  })
  // document.getElementById('play').addEventListener('click',function(){
  //   document.querySelector('.heartBeat').addClass('animated');
  // })
</script>

</html>